<template>
	<view class="demo-loading">
		<cl-card label="基本信息">
			<cl-loading-mask :loading="false" text="拼命加载中">
				<cl-form>
					<cl-form-item label="我的名称">
						<cl-input v-model="username"  placeholder="请填写名称"></cl-input>
					</cl-form-item>

					<!-- <cl-form-item label="手机号">
						<cl-input placeholder="请填写手机号"></cl-input>
					</cl-form-item> -->
				</cl-form>
			</cl-loading-mask>
		</cl-card>
		
		<cl-card label="我的头像">
			<cl-upload :value="img" ref="uploadimgctrl" :action="action" :headers="headers"></cl-upload>
		</cl-card>
		
		
		<view style="text-align: center;" @click="confirm">
			<cl-row>
				<cl-col>
					<cl-button type="primary" style="text-align: center; margin: 0px auto;">
						<text>保存信息</text>
					</cl-button>
				</cl-col>
			</cl-row>
		</view>

		<!-- <cl-card label="自定义">
			<cl-loading-mask
				:loading="true"
				background="rgba(0, 0, 0, 0.6)"
				color="#fff"
				text="拼命加载中"
			>
				<cl-form>
					<cl-form-item label="姓名">
						<cl-input placeholder="请填写名称"></cl-input>
					</cl-form-item>

					<cl-form-item label="手机号">
						<cl-input placeholder="请填写手机号"></cl-input>
					</cl-form-item>
				</cl-form>
			</cl-loading-mask>
		</cl-card> -->

		<!-- <cl-card label="图标">
			<cl-loading></cl-loading>
		</cl-card> -->

		<!-- <cl-card label="基本用法"> -->
			<cl-loading-mask
				:loading="loading"
				text="数据配置中"
				color="#000"
				fullscreen
			></cl-loading-mask>
			<!-- <cl-button @tap="open()" size="small">
				<text>全屏</text>
			</cl-button> -->
		<!-- </cl-card> -->
		<cl-message ref="message"></cl-message>
	</view>
</template>

<script>
import http from '@/common/requestConfig.js';
export default {
	components: {
		http
	},
	data() {
		return {
			loading: false,
			username:"",
			img:"",
			action:  '/api/app/v1/customer/UploadAvatar',
			uploadinfo:[],
			headers:{"Auth":global.token()}
		};
	},
	onLoad() {
		var that = this;
		this.action = global.baseUrl + this.action;
		http.post("customer/GetInfo", {}
		).then(res => {
			if(res.code == 1){
				res = res.data;
				that.img = global.baseUrl + res.img;
				that.username = res.username;
			}
		}).catch(res=>{
			//console.log('throw error..');
			//that.LoginInfo();
		});
		
	},
	methods: {
		open() {
			this.loading = true;

			// setTimeout(() => {
			// 	this.loading = false;
			// }, 1500);
		},
		confirm(){
			this.loading = true;
			var that = this;
			this.action = global.baseUrl + this.action;
			//var img = that.img.replace(global.baseUrl,"")
			var img =that.$refs.uploadimgctrl.urls[0].replace(global.baseUrl,"");
			//console.log(img);
			http.post("customer/EditInfo", {img:img,username:that.username}
			).then(res => {
				that.loading = false;
				if(res.code == 1){
					that.openModel('success',res.message);
				}else{
					uni.showModal({
						title:"系统提示",
						content:res.message
					})
				}
			}).catch(res=>{
				//console.log('throw error..');
				//that.LoginInfo();
			});
		},
		openModel(type,message, options) {
			this.$refs["message"].open({
				type,
				message: message,
				...options,
			});
		},
	}
};
</script>

<style lang="scss">
.demo-loading {
	background-color: #f7f7f7;
	/deep/.cl-card__container {
		position: relative;
	}
}
</style>
